<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Temu跨境电商平台系统设计 - 系统管理员使用场景</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "Noto Sans SC", sans-serif;
        background-color: #f9f9f9;
      }

      .slide-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        animation: fadeIn 1s ease-out;
        background: linear-gradient(135deg, #ffffff 0%, #f6f6f6 100%);
      }

      .logo-container {
        position: absolute;
        top: 20px;
        right: 30px;
        z-index: 20;
      }

      .page-title {
        position: relative;
        font-size: 2.2rem;
        font-weight: 700;
        color: #003366;
        text-align: center;
        margin-bottom: 5px;
        animation: slideInDown 0.8s ease-out;
      }

      .title-decoration {
        position: relative;
        height: 3px;
        width: 140px;
        margin: 0 auto 20px;
        background: linear-gradient(90deg, transparent, #ff4e00, transparent);
        animation: pulseWidth 2s infinite;
      }

      .page-number {
        position: absolute;
        bottom: 15px;
        right: 30px;
        font-size: 0.9rem;
        color: #003366;
        opacity: 0.7;
      }

      /* 左右布局 */
      .main-layout {
        display: flex;
        width: 94%;
        height: calc(100% - 140px);
        margin: 0 auto;
        gap: 30px;
      }

      /* 左侧图片区域 */
      .image-section {
        flex: 1;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        position: relative;
        animation: fadeIn 0.8s ease-out, slideInLeft 0.8s ease-out;
      }

      .feature-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .image-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(
          0deg,
          rgba(0, 51, 102, 0.9) 0%,
          rgba(0, 51, 102, 0.8) 50%,
          rgba(0, 51, 102, 0) 100%
        );
        color: white;
      }

      .overlay-title {
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 10px;
      }

      .overlay-text {
        font-size: 1rem;
        line-height: 1.4;
        opacity: 0.9;
      }

      /* 右侧内容区域 */
      .content-section {
        flex: 1.2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 15px;
        animation: fadeIn 0.8s ease-out, slideInRight 0.8s ease-out;
      }

      .scenario-section {
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: all 0.3s ease;
        padding: 15px;
        display: flex;
        flex-direction: column;
      }

      .scenario-section:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      }

      .scenario-section.system-maintenance {
        grid-column: 1;
        grid-row: 1;
        animation: fadeIn 0.8s ease-out 0.1s backwards,
          slideInUp 0.8s ease-out 0.1s backwards;
      }

      .scenario-section.user-management {
        grid-column: 2;
        grid-row: 1;
        animation: fadeIn 0.8s ease-out 0.2s backwards,
          slideInUp 0.8s ease-out 0.2s backwards;
      }

      .scenario-section.data-analysis {
        grid-column: 1;
        grid-row: 2;
        animation: fadeIn 0.8s ease-out 0.3s backwards,
          slideInUp 0.8s ease-out 0.3s backwards;
      }

      .scenario-section.logistics-optimization {
        grid-column: 2;
        grid-row: 2;
        animation: fadeIn 0.8s ease-out 0.4s backwards,
          slideInUp 0.8s ease-out 0.4s backwards;
      }

      .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        border-bottom: 1px solid rgba(0, 51, 102, 0.1);
        padding-bottom: 8px;
      }

      .header-icon {
        width: 36px;
        height: 36px;
        margin-right: 12px;
        background-color: rgba(255, 78, 0, 0.1);
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .header-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #003366;
      }

      /* 内容样式 */
      .section-content {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .feature-list {
        padding-left: 15px;
        margin-top: 5px;
        flex: 1;
      }

      .feature-item {
        margin-bottom: 8px;
        position: relative;
        padding-left: 15px;
        line-height: 1.5;
        font-size: 1.1rem;
        font-weight: 500;
      }

      .feature-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 9px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #ff4e00;
      }

      /* 底部可视化区域 */
      .visual-element {
        height: 60px;
        margin-top: 5px;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
      }

      /* 系统维护可视化 */
      .system-monitor {
        height: 100%;
        background-color: #f8f9fa;
        display: flex;
        align-items: center;
        padding: 0 10px;
        position: relative;
      }

      .server-status {
        flex: 1;
        height: 30px;
        margin: 0 3px;
        border-radius: 4px;
        background-color: rgba(0, 51, 102, 0.1);
        position: relative;
        overflow: hidden;
      }

      .status-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(90deg, #4caf50, #8bc34a);
        animation: pulseHeight 3s infinite;
      }

      .server-status:nth-child(1) .status-indicator {
        height: 80%;
        animation-delay: 0.2s;
      }

      .server-status:nth-child(2) .status-indicator {
        height: 60%;
        background: linear-gradient(90deg, #ffeb3b, #ffc107);
        animation-delay: 0.5s;
      }

      .server-status:nth-child(3) .status-indicator {
        height: 90%;
        animation-delay: 0.1s;
      }

      .server-status:nth-child(4) .status-indicator {
        height: 70%;
        animation-delay: 0.3s;
      }

      .server-status:nth-child(5) .status-indicator {
        height: 30%;
        background: linear-gradient(90deg, #ff5722, #f44336);
        animation-delay: 0.4s;
      }

      @keyframes pulseHeight {
        0%,
        100% {
          height: var(--base-height);
        }
        50% {
          height: calc(var(--base-height) - 10%);
        }
      }

      /* 用户管理可视化 */
      .user-grid {
        height: 100%;
        background-color: #f8f9fa;
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: 1fr 1fr;
        gap: 5px;
      }

      .user-dot {
        background-color: #003366;
        border-radius: 50%;
        opacity: 0.6;
      }

      .user-dot.active {
        background-color: #ff4e00;
        animation: pulseDot 2s infinite;
      }

      @keyframes pulseDot {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.6;
        }
        50% {
          transform: scale(1.2);
          opacity: 1;
        }
      }

      /* 数据分析可视化 */
      .report-visual {
        height: 100%;
        background-color: #f8f9fa;
        padding: 8px;
        display: flex;
        align-items: center;
      }

      .report-chart {
        flex: 1;
        height: 80%;
        position: relative;
      }

      .chart-line {
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: rgba(0, 51, 102, 0.1);
      }

      .chart-line:nth-child(1) {
        top: 0;
      }

      .chart-line:nth-child(2) {
        top: 33%;
      }

      .chart-line:nth-child(3) {
        top: 66%;
      }

      .chart-line:nth-child(4) {
        top: 100%;
      }

      .chart-path {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .chart-path svg {
        width: 100%;
        height: 100%;
      }

      .chart-path path {
        stroke: #ff4e00;
        stroke-width: 2;
        fill: none;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: dash 3s ease-in-out forwards;
      }

      @keyframes dash {
        to {
          stroke-dashoffset: 0;
        }
      }

      /* 物流优化可视化 */
      .logistics-map {
        height: 100%;
        background-color: #f8f9fa;
        position: relative;
        overflow: hidden;
      }

      .map-path {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
      }

      .map-path svg {
        width: 100%;
        height: 100%;
      }

      .map-path path {
        stroke: #003366;
        stroke-width: 2;
        fill: none;
        stroke-dasharray: 15, 5;
        animation: moveDash 10s linear infinite;
      }

      .map-path circle {
        fill: #ff4e00;
      }

      @keyframes moveDash {
        to {
          stroke-dashoffset: -20;
        }
      }

      /* 动画 */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes slideInDown {
        from {
          transform: translateY(-30px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      @keyframes slideInUp {
        from {
          transform: translateY(30px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      @keyframes slideInLeft {
        from {
          transform: translateX(-50px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes slideInRight {
        from {
          transform: translateX(50px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes pulseWidth {
        0%,
        100% {
          width: 100px;
        }
        50% {
          width: 140px;
        }
      }

      /* 图标样式 */
      .icon-svg {
        width: 22px;
        height: 22px;
      }
    </style>
  </head>
  <body>
    <div class="slide-container">
      <!-- Logo -->
      <div class="logo-container">
        <img
          src="images/temu_logo.svg"
          alt="Temu Logo"
          width="100"
          height="30"
        />
      </div>

      <!-- 标题 -->
      <div class="flex flex-col items-center mt-5 mb-4">
        <h1 class="page-title">系统管理员使用场景</h1>
        <div class="title-decoration"></div>
      </div>

      <!-- 左右布局主区域 -->
      <div class="main-layout">
        <!-- 左侧图片区域 -->
        <div class="image-section">
          <img src=".\static\a.jpg" alt="系统管理中心" class="feature-image" />
          <div class="image-overlay">
            <h2 class="overlay-title">系统管理中心</h2>
            <p class="overlay-text">
              支持系统全面监控与管理，确保平台高效、稳定、安全运行，为用户和商家提供可靠服务支持
            </p>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="content-section">
          <!-- 系统维护 -->
          <div class="scenario-section system-maintenance">
            <div class="section-header">
              <div class="header-icon">
                <svg class="icon-svg" viewBox="0 0 24 24" fill="#ff4e00">
                  <path
                    d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"
                  />
                </svg>
              </div>
              <h2 class="header-title">系统维护</h2>
            </div>

            <div class="section-content">
              <ul class="feature-list">
                <li class="feature-item">监控系统运行状态</li>
                <li class="feature-item">处理异常事件</li>
              </ul>

              <div class="visual-element">
                <div class="system-monitor">
                  <div class="server-status" style="--base-height: 80%">
                    <div class="status-indicator"></div>
                  </div>
                  <div class="server-status" style="--base-height: 60%">
                    <div class="status-indicator"></div>
                  </div>
                  <div class="server-status" style="--base-height: 90%">
                    <div class="status-indicator"></div>
                  </div>
                  <div class="server-status" style="--base-height: 70%">
                    <div class="status-indicator"></div>
                  </div>
                  <div class="server-status" style="--base-height: 30%">
                    <div class="status-indicator"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 用户管理 -->
          <div class="scenario-section user-management">
            <div class="section-header">
              <div class="header-icon">
                <svg class="icon-svg" viewBox="0 0 24 24" fill="#ff4e00">
                  <path
                    d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"
                  />
                </svg>
              </div>
              <h2 class="header-title">用户管理</h2>
            </div>

            <div class="section-content">
              <ul class="feature-list">
                <li class="feature-item">审核商家资质</li>
                <li class="feature-item">管理用户账号</li>
              </ul>

              <div class="visual-element">
                <div class="user-grid">
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot active"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot active"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot active"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot"></div>
                  <div class="user-dot active"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据分析 -->
          <div class="scenario-section data-analysis">
            <div class="section-header">
              <div class="header-icon">
                <svg class="icon-svg" viewBox="0 0 24 24" fill="#ff4e00">
                  <path
                    d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14H7v-2h8v2zm0-4H7v-2h8v2zm0-4H7V7h8v2zm4 8h-2V7h2v10z"
                  />
                </svg>
              </div>
              <h2 class="header-title">数据分析</h2>
            </div>

            <div class="section-content">
              <ul class="feature-list">
                <li class="feature-item">生成经营报表</li>
                <li class="feature-item">评估绩效</li>
              </ul>

              <div class="visual-element">
                <div class="report-visual">
                  <div class="report-chart">
                    <div class="chart-line"></div>
                    <div class="chart-line"></div>
                    <div class="chart-line"></div>
                    <div class="chart-line"></div>
                    <div class="chart-path">
                      <svg viewBox="0 0 100 40">
                        <path d="M0,30 Q20,15 30,20 T50,10 T70,20 T100,5" />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 物流优化 -->
          <div class="scenario-section logistics-optimization">
            <div class="section-header">
              <div class="header-icon">
                <svg class="icon-svg" viewBox="0 0 24 24" fill="#ff4e00">
                  <path
                    d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
                  />
                </svg>
              </div>
              <h2 class="header-title">物流优化</h2>
            </div>

            <div class="section-content">
              <ul class="feature-list">
                <li class="feature-item">路径规划</li>
                <li class="feature-item">异常处理追踪</li>
                <li class="feature-item">合作伙伴管理</li>
              </ul>

              <div class="visual-element">
                <div class="logistics-map">
                  <div class="map-path">
                    <svg viewBox="0 0 100 60">
                      <path
                        d="M10,30 C20,10 40,50 60,20 S80,40 90,30"
                        stroke-dasharray="4,2"
                      />
                      <circle cx="10" cy="30" r="3" />
                      <circle cx="60" cy="20" r="3" />
                      <circle cx="90" cy="30" r="3" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 页码 -->
      <div class="page-number">7 / 20</div>
    </div>
  </body>
</html>
